<template>
	<div class="advcontainer" ref="scrollbox">
		<div class="advtop flexrow">
			<span class="bluetit">说说你的看法</span>
			<el-button class="bluebtn" @click="advbtnClick">我要评价</el-button>
		</div>
		<div class="advlist" v-for="(item,index) in feedback" :key="index" >
			<div class="advitem">
				<h3>{{item.member_name}}</h3>
				<p>{{item.content}}</p>
				<div class="flexrow">
					<span>{{item.create_time}}</span>
					<span class="flexrow iconspan">
                        <i class="iconfont icontubiao15"></i>
                        <span>{{item.reply.length}}</span>
                    </span>
				</div>
               <!--  <div v-if="item.reply"> -->
                    <div 
                        class="itemadv"  
                        v-for="(reply,cindex) in feedback[index].reply" 
                        :key="cindex"
                    >  
                                 
                        <h3>{{reply.member_name}}</h3>
                        <p>{{reply.content}}</p>
                    </div> 
               <!--  </div>
                 -->
                <el-divider></el-divider>

			</div>
		</div>
        <div class="userpage">
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page="currentpage"
                            :page-size="pagesize"
                            :hide-on-single-page="true"
                            layout="prev, pager, next"
                            :total="total">
                        </el-pagination>
        </div>

		<el-dialog title="用户评价" :visible.sync="advice" class="advdia">
			<p class="bluetit advtit">说说你的看法</p>
            <el-form :model="form" :rules="rules"  ref="form" class="advinput">
                <el-form-item prop="desc">
                    <el-input type="textarea" v-model="form.desc" autocomplete="off" placeholder="请输入内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">

                <el-button class="bluebtn" @click="submit('form')">我要评价</el-button>
               <!--  <span v-if="denglu" class="loginspan">登录后可以发表评价</span>  -->
            </div>
        </el-dialog>

	</div>
</template>
<script>
import axios from 'axios'
import storage from '../../../storage/index'

export default {

    name: 'AdviceMain',
    data() {
      return {
        advice: false,
        feedback:[],
        total:0,
        currentpage:1,
        pagesize:10,
        form: {
          desc:''
        },
        rules: {
            desc: [
                { required: true, message: '内容不能为空', trigger: 'blur' },
                { min: 5, message: '内容不少于五个字', trigger: 'blur' }
            ]
        }
      }
    },
    computed:{
        // feedback(){
        //     return JSON.parse(storage.get('feedback'))
        // },
        denglu(){
          return this.$store.state.denglu
        },
        lever(){
         return JSON.parse(storage.get('user')).lever
        }
    },
    methods:{
            handleCurrentChange: function(currentpage){                                
                this.currentpage = currentpage
                this.getAdvInfo(10,currentpage,1)
                // 页面回到顶部
                let scrollTop= document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
                var el_ = this.$refs.scrollbox
                el_.scrollTop = 0                                 
            },
                
            getAdvInfo(a,b,c){              
                axios.get('/Feedback/index?limit='+a+'&page='+b+'&my='+c,{
                  query:{
                    limit:a,
                    page:b,
                    my:c
                  }
                }).then((res)=>{
                  res = res.data
                  if (res.status==200) {
                    const data = res.data
                    //storage.set('feedback',JSON.stringify(data.data))
                    this.total=data.total
                    this.feedback = data.data
                  }            
                });
            },
            advbtnClick(){
                if(this.denglu){
                    alert('请先登录！')
                }else{
                    this.advice = true
                }
            },
            submit(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let content = this.form.desc;
                        axios.post('/Feedback/submit',{ 
                          content
                        }).then((res)=>{
                            res = res.data
                          if (res.status==200 ) {
                            alert('提交成功')
                            this.advice = false 
                            this.getAdvInfo(10,1,1)
                          }            
                        });
                    } else {
                      console.log('error submit!!');
                      return false;
                    }
                  });
            }

    },
    created (){
        this.getAdvInfo(10,1,0)


    }
        
    

}
</script>

<style >
	.advcontainer{
		background: #fff;
		padding:30px 15px;
        height: 485px;
        overflow: auto;
	}
	.advtop,.advitem >.flexrow{
		justify-content: space-between;
	}
    .advitem >.flexrow{
        margin-bottom: 15px;
    }
	.advtop .bluetit{
		display: inline-block;
		height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-weight: 300;
	}
    .advtop .bluebtn,.dialog-footer .bluebtn{
        font-size: 16px;
        font-weight: 300;
        width: 146px;
        border-radius: 0;
        background: #2154e7;
    }
    .advitem{
        margin-bottom: 15px;
    }
    .advitem h3,.itemadv h3{
        font-weight: 500;
        font-size: 16px;
        margin:0;
    }
	.advitem p,.itemadv p{
		font-size: 12px;
		color: #4a4a4a;
	}
    .advitem p{
        margin:15px 0;  
    }
    .advitem .flexrow>span{
        font-size: 12px;
        color: #878787;
    }
   
   .advtit{
        margin-top: 10px;
        margin-bottom: 35px;
        font-weight: 400;
    }
   
.itemadv {
    padding:10px 20px;
    background: #e5e5e5;
}
.itemadv p{
    margin: 5px 0;
}
.iconspan{
    align-items: center;
    align-content: center;
    margin-right: 10px;
}
.iconspan i{
    margin-right: 5px;
}
.loginspan{
    font-size:14px;
    color: #333;
}
.userpage{
    text-align: center;
}
</style>